<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        /*
         Flex(弹性盒子)
         默认值为row row-reverse
         column column-reverse
                是 `flex-direction` 和 `flex-wrap` 的合并简写。
                flex-flow: row wrap;
         */
            width: 300px;
        }
        .item{
            width: 150px;
        }
        .container :nth-child(1){
            background-color: #646cff;
            height: 150px;
        }
        .container :nth-child(2){
            background-color: #213547;
            height: 150px;
        }
        .container :nth-child(3){
            background-color:#eccf34;
            height: 150px;
        }
        .container2{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 300px;
            justify-content: space-between;
            align-items: center;
        }

        .item2{
            width: 50px;
        }

        .container2 :nth-child(1){
            background-color: #cf6d6d;
            height: 100px;
        }
        .container2 :nth-child(2){
            background-color: #8cd54a;
            height: 200px;
        }
        .container2 :nth-child(3){
            background-color: #3886d5;
            height: 300px;
        }

        .container3{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            align-content: space-between;
        }

        .item3{
            width: 100px;
        }

        .container3 :nth-child(1){
            background-color: #8cd54a;
            height: 70px;
        }

        .container3 :nth-child(2){
            background-color: #4a94d5;
        }

        .container3 :nth-child(3){
            background-color: #bf228a;
        }

        .container3 :nth-child(4){
            background-color: #eccf34;
        }

        .container3 :nth-child(5){
            background-color: #8cd54a;
        }

        .container3 :nth-child(6){
            background-color: #25aba4;
            height: 70px;
        }

        .container3 :nth-child(7){
            background-color: #8cd54a;
        }

        .container3 :nth-child(8){
            background-color: #744ad5;
        }

        .container3 :nth-child(9){
            background-color: #9a38b4;
            height: 70px;
        }
        .container4{
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            border: 1px solid #1a1a1a;
            justify-content: space-between;
        }
        /*
            使用justify-content：space-between，最后一行，如果说少一个，默认左右排布的，如果想要从左到到右排布
        */
        .container4:after{
            content: '';
            width: 100px;
        }

        .item4{
            width: 100px;

        }

        .container4 :nth-child(1){
            background-color: #8cd54a;
        }

        .container4 :nth-child(2){
            background-color: #744ad5;
        }

        .container4 :nth-child(3){
            background-color: #ac13d6;
            height: 70px;
        }
        .container4 :nth-child(4){
            background-color: #ac13d6;
            height: 70px;
        }
        .container4 :nth-child(5){
            background-color: #744ad5;
        }
        .container4 :nth-child(6){
            background-color: #8cd54a;
        }
        .container4 :nth-child(7){
            background-color: #8cd54a;
        }

        .container4 :nth-child(8){
            background-color: #744ad5;
            height: 70px;
        }

    </style>
  </head>
  <body>
  <!--
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  -->
  <!--
          div p 是块级元素，可以设置宽和高，并且自占一行
          span  是行内元素，不可以设置宽和高
      -->
  <h1>第一个弹性盒子</h1>
  <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
  </div>
  <h1>第二个弹性盒子</h1>
  <div class="container2">
      <div class="item2">item1</div>
      <div class="item2">item2</div>
      <div class="item2">item3</div>
  </div>

  <h1>第三个弹性盒子</h1>
  <div class="container3">
      <div class="item3">item1</div>
      <div class="item3">item2</div>
      <div class="item3">item3</div>
      <div class="item3">item4</div>
      <div class="item3">item5</div>
      <div class="item3">item6</div>
      <div class="item3">item7</div>
      <div class="item3">item8</div>
      <div class="item3">item9</div>
  </div>
  <h1>第四个弹性盒子</h1>
  <div class="container4">
      <div class="item4">item1</div>
      <div class="item4">item2</div>
      <div class="item4">item3</div>
      <div class="item4">item4</div>
      <div class="item4">item5</div>
      <div class="item4">item6</div>
      <div class="item4">item7</div>
      <div class="item4">item8</div>
  </div>
  </body>
</html>
